<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv='X-UA-Compatible' charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>在线聊天室</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <script src="./js/confetti.js"></script>
    <script src="./js/jquery.min.js"></script>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <form method="post" action="/login">
            <div class="card mx-auto border border-info" style="filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9; margin-top: 100px;max-width:500px;width:95%">
                <div class="card-header bg-info text-white">
                    登录面板
                </div>
                <div class="card-body">
                    <div th:each="info: ${alert}" >
                        <div th:class="${info.class}" class="alert alert-danger alert-dismissible fade show">
                            <button type="button" th:class="${info.bt}" class="btn-close" data-bs-dismiss="alert"></button>
                            <strong th:text="${info.content}">123123123</strong>
                        </div>
                    </div>
                    <div class="d-flex flex-column">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user" style="font-size:24px;width:30px"></i>
                                        </span>
                            </div>
                            <input name="name" type="text" class="form-control flex-fill" id="user" placeholder="用户名" tabIndex="1">
                        </div>
                        <div class="input-group"  style="margin-top:7px">
                            <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-lock" style="font-size:24px;width:30px"></i>
                                        </span>
                            </div>
                            <input name="password" type="password" class="form-control " id="password" placeholder="密码" tabIndex="2">
                        </div>
                        <input type="submit"class="btn btn-info flex-fill" id="login" style="margin:7px auto 0 auto; min-width: 100px;" tabIndex="3"value="登录">
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</body>

</html>